Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Re-style split view UI #27008

Merged
merged 3 commits into from
Dec 16, 2024
Merged

Re-style split view UI #27008

merged 3 commits into from
Dec 16, 2024

Conversation

simonhong
Copy link
Member

@simonhong simonhong commented Dec 13, 2024 •
edited
Loading

fix brave/brave-browser#42304
fix brave/brave-browser#42879

Added separator when split view tile is inactive.
Applied latest split view tab's background color.
Updated active/hover bg color of inactive tab in split view

Screen.Recording.2024-12-13.at.11.16.42.AM.mov

Resolves

Submitter Checklist:

  • I confirm that no security/privacy review is needed and no other type of reviews are needed, or that I have requested them
  • There is a ticket for my issue
  • Used Github auto-closing keywords in the PR description above
  • Wrote a good PR/commit description
  • Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
  • Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
  • Checked the PR locally:
    • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
    • npm run presubmit wiki, npm run gn_check, npm run tslint
  • Ran git rebase master (if needed)

Reviewer Checklist:

  • A security review is not needed, or a link to one is included in the PR description
  • New files have MPL-2.0 license header
  • Adequate test coverage exists to prevent regressions
  • Major classes, functions and non-trivial code blocks are well-commented
  • Changes in component dependencies are properly reflected in gn
  • Code follows the style guide
  • Test plan is specified in PR before merging

After-merge Checklist:

Test Plan:

See the linked issue.

@simonhong simonhong self-assigned this Dec 13, 2024
@simonhong
Copy link
Member Author

@aguscruiz Split view tab's background color is also updated as it fits well with separator color.
but didn't touch private/tor window's split view tab's background color.
You can see them in the above recording. Let me know if you want to update private window's tab background.

@aguscruiz
Copy link
Collaborator

Great! Yeah I think private/tor should also be updated for consistency

@simonhong
Copy link
Member Author

Great! Yeah I think private/tor should also be updated for consistency

Ok, let me know when figma is ready for private/tor.

@aguscruiz
Copy link
Collaborator

You should be able to just use the same color tokens as with light/dark, but just changing the token to be Private-Window / Tor-Window instead of the Neutral one. They should work just as well

@simonhong
Copy link
Member Author

You should be able to just use the same color tokens as with light/dark, but just changing the token to be Private-Window / Tor-Window instead of the Neutral one. They should work just as well

Hmm, sorry I can't find corresponding token.
kColorDesktopbrowserTabbarSplitViewBackgroundHorizontal is kColorPrimitiveNeutral10 but it seems we don't have kColorPrimitiveNeutral10PrivateWindow token?

@aguscruiz
Copy link
Collaborator

Those tokens come from Nala. So as kColorPrimitiveNeutral10 is --leo-color-primitive-neutral-10, you'll see you also have --leo-color-primitive-private-window-10 in Nala, that's what I mean. I don't know how that translate to the chromium tokens though

@aguscruiz
Copy link
Collaborator

I imagine you have something like that already for the other colors in the private windows color schemes, right?

@simonhong
Copy link
Member Author

I imagine you have something like that already for the other colors in the private windows color schemes, right?

Ah, Ok. I think I found them :)

  kColorPrimitivePrivateWindow0,
  kColorPrimitivePrivateWindow10,
  kColorPrimitivePrivateWindow100,
  kColorPrimitivePrivateWindow15,
  kColorPrimitivePrivateWindow20,
  kColorPrimitivePrivateWindow25,
  kColorPrimitivePrivateWindow30,
  kColorPrimitivePrivateWindow35,
  kColorPrimitivePrivateWindow40,
  kColorPrimitivePrivateWindow5,
  kColorPrimitivePrivateWindow50,
  kColorPrimitivePrivateWindow60,
  kColorPrimitivePrivateWindow70,
  kColorPrimitivePrivateWindow80,
  kColorPrimitivePrivateWindow90,
  kColorPrimitivePrivateWindow95,
  kColorPrimitivePrivateWindow98,
  kColorPrimitivePrivateWindow99,

@simonhong
Copy link
Member Author

simonhong commented Dec 13, 2024 •
edited
Loading

You should be able to just use the same color tokens as with light/dark, but just changing the token to be Private-Window / Tor-Window instead of the Neutral one. They should work just as well

I have a question.
kColorPrimitiveNeutral10 and kColorPrimitiveNeutral80 are used for dark and light them as a kColorDesktopbrowserTabbarSplitViewBackgroundHorizontal.
Which one should be used for Private(and Tor)? kColorPrimitivePrivateWindow10 or kColorPrimitiveWindow80?

As Tor and Private are darkish, maybe kColorPrimitivePrivateWindow10 and kColorPrimitiveTorWindow10 ?

@aguscruiz
Copy link
Collaborator

If kColorPrimitiveNeutral10 is used for dark mode, then kColorPrimitivePrivateWindow10 and kColorPrimitiveTorWindow10 should work too. Same for 80.

The only caveat is that Private and Tor windows are always forced to use the dark mode tokens.

The number value 10-20-80-etc. should be interchangeable with any other color shade.

kColorPrimitiveNeutral10 should have the same luminosity as kColorPrimitivePrivateWindow10 or kColorPrimitiveGreen10 or any other primitive token with the same number.

Does that make sense? It's the scheme that allows for theming with Material.

@simonhong
Copy link
Member Author

If kColorPrimitiveNeutral10 is used for dark mode, then kColorPrimitivePrivateWindow10 and kColorPrimitiveTorWindow10 should work too. Same for 80.

The only caveat is that Private and Tor windows are always forced to use the dark mode tokens.

The number value 10-20-80-etc. should be interchangeable with any other color shade.

kColorPrimitiveNeutral10 should have the same luminosity as kColorPrimitivePrivateWindow10 or kColorPrimitiveGreen10 or any other primitive token with the same number.

Does that make sense? It's the scheme that allows for theming with Material.

Ok, how about this?
image

@aguscruiz
Copy link
Collaborator

Hmmm I don't think that's how the regular dark mode chrome background looks like, but I don't want to make you go into that rabbit hole. If we can add that small gap between the split view group and the toolbar, then I'm ok with that

@simonhong
Copy link
Member Author

simonhong commented Dec 13, 2024 •
edited
Loading

Hmmm I don't think that's how the regular dark mode chrome background looks like, but I don't want to make you go into that rabbit hole. If we can add that small gap between the split view group and the toolbar, then I'm ok with that

regular dark mode also doesn't have gap between split view and toolbar now.
image

I'm thinking to use this PR not just for adding separator but for whole split view UI re-styling.
With our new split view style(below), we'll see the gap between them.

image

@simonhong simonhong marked this pull request as draft December 13, 2024 14:12
@simonhong simonhong changed the title Added separator to inactive split view tab Re-style split view UI Dec 13, 2024
@aguscruiz
Copy link
Collaborator

Awesome, that looks way better, yes

@simonhong simonhong force-pushed the split_view_separator branch from d33777c to 63e2244 Compare December 14, 2024 01:33
@simonhong
Copy link
Member Author

simonhong commented Dec 14, 2024 •
edited
Loading

@aguscruiz Updated hover colors

Horizontal

Screen.Recording.2024-12-14.at.10.33.32.AM.mov

Vertical

Screen.Recording.2024-12-14.at.11.45.45.AM.mov

@simonhong simonhong force-pushed the split_view_separator branch from 63e2244 to 1e4887a Compare December 14, 2024 02:45
@aguscruiz
Copy link
Collaborator

Looks great :D. Just noticing now, but the gap between the two tabs here in vertical seems to big, right? Should be the same space as the padding against the container

image

Expected:
image

@simonhong
Copy link
Member Author

Looks great :D. Just noticing now, but the gap between the two tabs here in vertical seems to big, right? Should be the same space as the padding against the container

image Expected: image

Yes, it's different now with our design. I'll update it also in this PR :)

@simonhong simonhong marked this pull request as ready for review December 16, 2024 01:06
@simonhong simonhong mentioned this pull request Dec 16, 2024
Open
15 tasks
@simonhong simonhong merged commit 265e2ac into master Dec 16, 2024
18 checks passed
@simonhong simonhong deleted the split_view_separator branch December 16, 2024 01:25
@github-actions github-actions bot added this to the 1.75.x - Nightly milestone Dec 16, 2024
@brave-builds
Copy link
Collaborator

Released in v1.75.102

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fallaciousreasoning fallaciousreasoning fallaciousreasoning approved these changes

Assignees

@simonhong simonhong

Labels
None yet
Projects
None yet
Milestone
1.75.x - Nightly
4 participants
@simonhong @aguscruiz @brave-builds @fallaciousreasoning